<!--
 * @Author: your name
 * @Date: 2021-08-30 20:39:23
 * @LastEditTime: 2021-08-31 22:05:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\components\Drawer\Drawer.vue
-->
<template>
    <div :class="['inputs', isBorder ? 'aaa' : '']">
        <input
            v-model="text"
            type="text"
            @focus="onFocus"
            @blur="onBlur"
            @input="onInput"
        />
        <div :class="isFocus ? 'sss' : ''">
            {{ text.length < 1 ? `请输入${title}` : `${title}` }}
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    name: 'Inputs',
    props: {
        title: {
            type: String,
            default: () => '标题',
        },
    },
    emits: {
        onInput: null,
    },
    setup(_, { emit }) {
        let text = ref()
        let isFocus = ref()
        let isBorder = ref()
        text.value = ''
        isBorder.value = false
        isFocus.value = false
        const onFocus = () => {
            isBorder.value = true
            isFocus.value = true
        }
        const onBlur = () => {
            isBorder.value = false
            if (text.value.length < 1) {
                isFocus.value = false
            }
        }
        const onInput = () => {
            emit('onInput', { name: _.title, value: text.value })
        }
        return {
            text,
            isBorder,
            isFocus,
            onFocus,
            onBlur,
            onInput,
        }
    },
})
</script>

<style lang="less" scoped>
.inputs .sss {
  font-size: 12px;
  top: 0;
  height: 20px;
  line-height: 20px;
  padding: 0 5px;
  color: #519ac9 !important;
}
.aaa {
  border: 2px solid #519ac9 !important;
}
.inputs {
  width: 230px;
  height: 45px;
  border: 1px solid #ccc;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  &:focus {
    border: 1px solid #007fff;
  }

  input {
    width: 100%;
    height: 30px;
    background: transparent;
    border: none;
    outline-style: none;
    position: absolute;
    bottom: 0;
    padding: 0 5px;
    & ~ div {
      pointer-events: none;
      position: absolute;
      top: 0;
      left: 0;
      transition: all 0.3s cubic-bezier(0.4, 0.24, 0.46, 0.7) 0s;
      width: 100%;
      height: 43px;
      line-height: 41px;
      padding: 0 5px;
    }
  }
}
</style>
